<template>
	<view class="container">
		<uni-list :border="true">
			<uni-list-item title="房间:" :rightText="form.roomName" />
			<uni-list-item title="合同周期:" :rightText="form.rangeNum" />
			<uni-list-item title="距离到期时间(天):" :rightText="form.cycle?form.cycle:'0'" />
			<view class="mainBox">
				<view class="title">新续租(请选择):</view>
				<view class="tabBox">
					<tabRadioCheck :radioList="radioList" :curTab="curTab" @updateCurTab="updateCurTab"></tabRadioCheck>
				</view>
				<view class="listBox">
					<view class="list flex">
						<view class="tit">新续租合同周期: </view>
						<view class="txt text-right flex-1">{{form.newStartCon}}-{{form.newEndCon}}</view>
					</view>
					<view class="list flex">
						<view class="tit">租金(共计):</view>
						<view class="txt text-right flex-1">{{(form.monthRent*curTab).toFixed(2)}} 元</view>
					</view>
					<view class="list flex">
						<view class="tit">物业费(共计):</view>
						<view class="txt text-right flex-1">{{(form.property*curTab).toFixed(2)}} 元</view>
					</view>
					<view class="list listLast flex">
						<view class="tit yellow">合计:</view>
						<view class="txt text-right flex-1 yellow">{{(form.monthRent*curTab + form.property*curTab).toFixed(2)}}元</view>
					</view>
				</view>
			</view>
		</uni-list>
		<view class="btn" @click="confirm">确认</view>
		<!-- <u-button text="确认" class="btn" @click="confirm"></u-button> -->
	</view>
</template>
<script setup lang="ts">
	import { getContractApply } from '@/common/API/contract'
	import { onLoad} from "@dcloudio/uni-app"
	import { reactive,ref } from "vue";
	import dayjs from "dayjs"
	
	import tabRadioCheck from '@/components/tabRadioCheck/index.vue'
	const curTab = ref(3)
	const radioList = reactive([
		{
			title: '3个月',
			val: 3
		},{
			title: '6个月',
			val: 6
		},{
			title: '12个月',
			val: 12
		}
	])
	const form = reactive({
		id: null,//id
		contractId: null,//合同id
		applyType: 2,
		startTime:null,
		endTime: null,
		monthRent: null,
		property:null,
		cycle:null,
		roomName: null,
		startCon:null,
		endCon: null,
		rangeNum: null,
		endConVal:null,
		totalProperty: null,
		totalRent: null,
		allTotal: null,
		newStartCon: null,
		newEndCon: null
	})
	//处理时间戳
	const timestamp = (val : any, s) => {
		return !s ? dayjs(val).format('YYYY-MM-DD') : dayjs(val).format('YYYY-MM-DD HH:mm:ss')
	}
	const confirm = async () => {
		let data = {
			contractId: form.contractId,//合同id
			applyType: 2,
			startTime: timestamp(form.newStartCon),
			endTime:  timestamp(form.newEndCon),
			monthRent: form.monthRent,
			property:form.property,
			cycle: curTab.value
		}
		if(form.id){
			data.id =  form.id
		}
		let res = await getContractApply(data)
		if(res){
			uni.redirectTo({
				url: `/pages/personal/contract/ConRenewalDetail?id=${res.id}`
			})
		}
	}
	const updateCurTab = (val) => {
		curTab.value = val
		form.newEndCon = timestamp(dayjs(form.endCon).add(curTab.value, 'month'))
	}
	onLoad((options)=>{
		if(options){
			let info = JSON.parse(decodeURIComponent(options.info))
			form.roomName = info.roomName
			form.monthRent = info.monthRent
			form.property = info.property
			//修改合同申请
			if(options.type == 'edit'){
				form.id = info.id
				form.contractId = info.contractId
				
				//合同周期开始结束时间
				form.startCon = info.sourceStartTime
				form.endCon = info.sourceEndTime
				form.rangeNum = form.startCon + '~'+ form.endCon
				//计算天数
				form.cycle = JSON.stringify(dayjs(timestamp(form.endCon)).diff(timestamp(form.startCon), 'day'))
				curTab.value = info.cycle
				updateCurTab(info.cycle)
				//合同周期开始结束时间
				form.endConVal = timestamp(dayjs(form.endCon).add(curTab.value, 'month'))
			}else{
				form.contractId = info.id
				let rangeStart = timestamp(new Date().getTime())//当天时间戳
				//合同周期开始结束时间
				form.startCon = timestamp(info.startTime)
				form.endCon = timestamp(info.endTime)
				form.rangeNum = form.startCon + '~'+ form.endCon
				//计算天数
				form.cycle = JSON.stringify(dayjs(timestamp(form.endCon)).diff(timestamp(form.rangeStart), 'day'))
				form.endConVal = timestamp(dayjs(form.endCon).add(curTab.value, 'month'))
			}
			form.newEndCon = timestamp(dayjs(form.endCon).add(curTab.value, 'month'))
			form.newStartCon = timestamp(dayjs(form.endCon).add(1, 'day'))
		}
	})
</script>
<style lang="scss" scoped>
.container{
	padding: 32rpx 0;
	::v-deep.uni-list{
		.uni-list-item__content-title{
			font-size: 28rpx;
		}
		.uni-list-item__extra-text{
			font-size: 28rpx;
			color: #4D4D4D;
		}
	}
	.mainBox{
		padding: 20rpx 32rpx;
		border-top: 2rpx solid #f3f3f3;
		.title{
			color: #4D4D4D;
		}
		.tabBox{
			
		}
		.listBox{
			.list{
				.tit,.txt{
					color: #999;
					line-height: 44rpx;
					font-size: 24rpx;
				}
			}
			.listLast{
				border-top: 2rpx solid #f3f3f3;
				margin-top: 16rpx;
				padding: 20rpx 0 10rpx;
				.tit,.txt{
					font-size: 32rpx;
				}
			}
		}
	}
	.btn{
		position: fixed;
		width: 686rpx;
		height: 84rpx;
		line-height: 84rpx;
		color: #fff;
		background: $uni-color-primary;
		bottom: 100rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		border-radius: 200rpx;
		text-align: center;
		::v-deep.u-button__text{
			font-size: 32rpx !important;
		}
	}
}
</style>
